<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        #error-message {
            width: 300px;
            position: relative;
            color: #666666;
            padding: 12px 30px;
            background-color: #FFECE4;
            border-radius: 5px;
            display: none;
        }

        #error-message::before {
            /*必须设置content属性*/
            content: '';
            background-image: url('../CSS3/img/error.png');
            background-size: 15px;
            position: absolute;
            left: 10px;
            display: inline-block;
            width: 15px;
            height: 15px;

        }

        #error-message::after {
            content: '！！！'
        }

        #btn {
            margin-top: 10px;
        }
    </style>
</head>

<body>

<div id="error-message">系统异常，请稍后再试</div>

<button onclick="fun()" id="btn" value="显示提示">显示提示</button>

<script type="text/javascript">
    function fun() {
        let btn = document.getElementById('btn');
        if (btn.getAttribute(("value")) === "显示提示") {
            document.getElementById("error-message").style.display = "block";
            btn.setAttribute("value", "隐藏提示");
        } else if (btn.getAttribute(("value")) === "隐藏提示") {
            document.getElementById("error-message").style.display = "none";
            btn.setAttribute("value", "显示提示");
        }
    }
</script>
</body>
</html>
